<template>
  <div>
    <el-button type="primary" @click="showprimary">显示</el-button>
    <el-table v-if="centerDialogVisible" class="tableBox" :data="tableData" align="center" border style="width: 100%;" :cell-style="myclass" highlight-current-row>
      <el-table-column align="center" v-for="(item, index) in headData" :key="index" :prop="item.value" :label="item.zwname">
        <template slot-scope="scope">
          <!--// 通过 v-if="!item.sfkgg" 控制是否可编辑单元格 //-->
          <el-input v-if="!item.sfkgg" v-model="scope.row[index] && scope.row[index].value" clearable />
          <span>{{scope.row[index] && scope.row[index].value}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button type="primary" @click="present ">提交</el-button>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      centerDialogVisible: true, //弹框显隐状态
      // 模拟表头数据
      headData: [
        {
          zwname: "id", //表头
          sfkgg: true, //判断单元格是否可编辑
          sfcb: null, //判断字体是否变色
        },
        {
          zwname: "姓名",
          sfkgg: false,
          sfcb: null,
        },
        {
          zwname: "性别",
          sfkgg: false,
          sfcb: true,
        },
        {
          zwname: "年龄",
          sfkgg: false,
          sfcb: true,
        },
        {
          zwname: "地址",
          sfkgg: false,
          sfcb: true,
        },
        {
          zwname: "联系方式",
          sfkgg: false,
          sfcb: true,
        },
      ],
      // 模拟表格数据
      tableData: [
        [
          {
            zwname: "样品编号",
            zdm: "ypbh",
            value: "id20200719",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "样品名称",
            zdm: "ypmc",
            value: "小明",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "分配省公司",
            zdm: "fpsgs",
            value: "男",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "受检单位",
            zdm: "sjdw",
            value: "20",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "油号",
            zdm: "yhbh",
            value: "北京昌平",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "抽样地点",
            zdm: "cydd",
            value: "18812349874",
            sfkgg: true,
            sfcb: false,
          },
        ],
        [
          {
            zwname: "样品编号",
            zdm: "ypbh",
            value: "id20220102",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "样品名称",
            zdm: "ypmc",
            value: "小红",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "分配省公司",
            zdm: "fpsgs",
            value: "女",
            sfkgg: true,
            sfcb: false,
          },
          {
            zwname: "受检单位",
            zdm: "sjdw",
            value: "18",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "油号",
            zdm: "yhbh",
            value: "北京海淀",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "抽样地点",
            zdm: "cydd",
            value: "18856432547",
            sfkgg: true,
            sfcb: null,
          },
        ],
        [
          {
            zwname: "样品编号",
            zdm: "ypbh",
            value: "id20220717",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "样品名称",
            zdm: "ypmc",
            value: "小蓝",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "分配省公司",
            zdm: "fpsgs",
            value: "未知",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "受检单位",
            zdm: "sjdw",
            value: "21",
            sfkgg: true,
            sfcb: false,
          },
          {
            zwname: "油号",
            zdm: "yhbh",
            value: "北京朝阳",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "抽样地点",
            zdm: "cydd",
            value: "16634219856",
            sfkgg: true,
            sfcb: null,
          },
        ],
      ],
    };
  },
  mounted() { },
  methods: {
    showprimary() {
      this.centerDialogVisible = true
    },
    //根据条件修改单元格字体样式（sfcb字段为false且不为null时）
    myclass({ row, columnIndex }) {
      if (row[columnIndex] && !row[columnIndex].sfcb && row[columnIndex].sfcb != null) {
        return "color: red";
      }
    },
    // 提交操作
    present() {
      let result = [];
      // 通过双层循环拿到所需字段
      this.tableData.forEach((item) => {
        let data = {};
        item.forEach((e) => {
          // 将字段名、字段值以键值对的形式赋值
          data[e.zdm] = e.value;
        });
        // 每一行数据为一个对象添加到数组中 [{},{},{},...]
        result.push(data);
      });
      this.centerDialogVisible = false
      console.log(result, "参数");
      // 执行接口操作
    },
  },
};
</script>

<style scoped>
.tableBox {
  margin-bottom: 20px;
}
/* 通过显隐控制input框的状态 */
.tableBox .el-input {
  display: none;
}
.tableBox .current-row .el-input {
  display: block;
}
.tableBox .current-row .el-input + span {
  display: none;
}
</style>
